<template>
  <div>
    <a-modal v-model:visible="visible">
      <template #title> 新增目标 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item label="目标名称" field="target_name">
          <a-input v-model="form.target_name" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="save">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { addTarget } from '@/api/winepro';
const props = defineProps({
  getTarget: { type: Function },
});
const visible = ref(false);
const formRef = ref(null);
const save = () => {
  formRef.value.validate().then(async (res) => {
    if (res === undefined) {
      const { code } = await addTarget(form);
      if (code === 200) {
        props.getTarget()
        visible.value = false;
        formRef.value.resetFields();
      }
    }
  });
};
const rules = {
  target_name: [
    {
      required: true,
      message: '请输入目标名称',
      trigger: 'blur',
    },
  ],
};
const openDialog = () => {
  visible.value = true;
};
const form = reactive({
  target_name: '',
});
defineExpose({
  openDialog,
});
</script>

<style lang="less" scoped></style>